<template>
  <div>
    <div class="map-background">
      <iframe
        :src="mapUrl"
        frameborder="0"
        scrolling="no"
        class="map-iframe"
      ></iframe>
    </div>
    <el-container class="dashboard-container">
      <!-- 左侧边栏：隐患分析、安全指数、分类统计 -->
      <el-aside style="width: 23vw" class="left-aside">
        <el-card class="aside-card" shadow="hover">
          <div class="card-header">
            <div class="left-header">
              <span class="header-font">隐患分析</span>
              <div class="all-icon">
                <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
              </div>
            </div>
          </div>
          <el-carousel :interval=3000 arrow="never" trigger="click" :autoplay="false">
            <el-carousel-item>
              <div class="card-container">
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div class="risk-chart-placeholder">
                      <div class="risk-chart-placeholder-text">
                        <div class="risk-title">
                          <el-button type="text" class="text-only-btn custom-btn" @click="handleClick('TOTAL')">综合风险<i class="el-icon-arrow-right custom-icon"></i></el-button>
                        </div>
                        <!--                    取所有数据的平均数，大于等于80分是低，大于等于60，小于80是中，小于60是高-->
                        <div class="risk-level"
                             :style="{ color: lineTitleA === '低' ? '#00B42A' : lineTitleA === '中' ? '#FF7D00' : lineTitleA === '高' ? '#F53F3F' : '' }">
                          {{ lineTitleA }}
                        </div>
                      </div>
                      <div class="risk-chart-placeholder-chart">
                        <simple-line-chart
                          :line-data="lineDataA"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="risk-chart-placeholder">
                      <div class="risk-chart-placeholder-text">
                        <!--                    <div class="risk-title">人为风险 ></div>-->
                        <div class="risk-title">
                          <el-button type="text" class="text-only-btn custom-btn" @click="handleClick('PERSONNEL')">人为风险<i class="el-icon-arrow-right custom-icon"></i></el-button>
                        </div>
                        <div class="risk-level"
                             :style="{ color: lineTitleB === '低' ? '#00B42A' : lineTitleB === '中' ? '#FF7D00' : lineTitleB === '高' ? '#F53F3F' : '' }">
                          {{ lineTitleB }}
                        </div>
                      </div>
                      <div class="risk-chart-placeholder-chart">
                        <simple-line-chart
                          :line-data="lineDataB"
                        />
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div class="risk-chart-placeholder">
                      <div class="risk-chart-placeholder-text">
                        <!--                    <div class="risk-title">设施风险 ></div>-->
                        <div class="risk-title">
                          <el-button type="text" class="text-only-btn custom-btn" @click="handleClick('DEVICE')">设施风险<i class="el-icon-arrow-right custom-icon"></i></el-button>
                        </div>
                        <div class="risk-level"
                             :style="{ color: lineTitleC === '低' ? '#00B42A' : lineTitleC === '中' ? '#FF7D00' : lineTitleC === '高' ? '#F53F3F' : '' }">
                          {{ lineTitleC }}
                        </div>
                      </div>
                      <div class="risk-chart-placeholder-chart">
                        <simple-line-chart
                          :line-data="lineDataC"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="risk-chart-placeholder">
                      <div class="risk-chart-placeholder-text">
                        <!--                    <div class="risk-title">环境风险 ></div>-->
                        <div class="risk-title">
                          <el-button type="text" class="text-only-btn custom-btn" @click="handleClick('ENVIRONMENT')">环境风险<i class="el-icon-arrow-right custom-icon"></i></el-button>
                        </div>
                        <div class="risk-level"
                             :style="{ color: lineTitleD === '低' ? '#00B42A' : lineTitleD === '中' ? '#FF7D00' : lineTitleD === '高' ? '#F53F3F' : '' }">
                          {{ lineTitleD }}
                        </div>
                      </div>
                      <div class="risk-chart-placeholder-chart">
                        <simple-line-chart
                          :line-data="lineDataD"
                        />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="card-container">
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div class="risk-chart-placeholder">
                      <div class="risk-chart-placeholder-text">
                        <div class="risk-title">
                          <el-button type="text" class="text-only-btn custom-btn" @click="handleClick('PRODUCE')">生产风险<i class="el-icon-arrow-right custom-icon"></i></el-button>
                        </div>
                        <!--                    取所有数据的平均数，大于等于80分是低，大于等于60，小于80是中，小于60是高-->
                        <div class="risk-level"
                             :style="{ color: lineTitleE === '低' ? '#00B42A' : lineTitleE === '中' ? '#FF7D00' : lineTitleE === '高' ? '#F53F3F' : '' }">
                          {{ lineTitleE }}
                        </div>
                      </div>
                      <div class="risk-chart-placeholder-chart">
                        <simple-line-chart
                          :line-data="lineDataE"
                        />
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="risk-chart-placeholder">
                      <div class="risk-chart-placeholder-text">
                        <!--                    <div class="risk-title">人为风险 ></div>-->
                        <div class="risk-title">
                          <el-button type="text" class="text-only-btn custom-btn" @click="handleClick('FIRE')">消防风险<i class="el-icon-arrow-right custom-icon"></i></el-button>
                        </div>
                        <div class="risk-level"
                             :style="{ color: lineTitleF === '低' ? '#00B42A' : lineTitleF === '中' ? '#FF7D00' : lineTitleF === '高' ? '#F53F3F' : '' }">
                          {{ lineTitleF }}
                        </div>
                      </div>
                      <div class="risk-chart-placeholder-chart">
                        <simple-line-chart
                          :line-data="lineDataF"
                        />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>

        <el-card class="aside-card" shadow="hover">
          <div class="card-header">
            <div class="left-header">
              <span class="header-font">安全指数</span>
              <div class="all-icon">
                <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
              </div>
            </div>
            <div class="right-header">
              <el-select
                :popper-append-to-body="false"
                v-model="querySafetyParams.dataRange"
                placeholder="请选择"
                class="select-box"
                @change="fetchSafetyData"
              >
                <el-option label="日指数" value="day"></el-option>
                <el-option label="周指数" value="week"></el-option>
                <el-option label="月指数" value="month"></el-option>
              </el-select>
            </div>
          </div>
          <div class="card-container">
            <line-chart
              :chart-data="customData"
            />
          </div>
        </el-card>

        <el-card class="aside-cardA" shadow="hover">
          <div class="card-header">
            <div class="left-header">
              <span class="header-font">AI分析</span>
              <div class="all-icon">
                <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
              </div>
            </div>
            <!--            <div class="right-header">-->
            <!--              <el-select-->
            <!--                :popper-append-to-body="false"-->
            <!--                v-model="queryClassificationParams.dataRange"-->
            <!--                placeholder="请选择"-->
            <!--                class="select-box"-->
            <!--                @change="fetchClassificationData"-->
            <!--              >-->
            <!--                <el-option label="日指数" value="day"></el-option>-->
            <!--                <el-option label="周指数" value="week"></el-option>-->
            <!--                <el-option label="月指数" value="month"></el-option>-->
            <!--              </el-select>-->
            <!--            </div>-->
          </div>
          <div class="card-containerText">
            <!-- 人·人员安全 -->
            <div class="stat-item">
              <span class="dim-tag tag-person">【人】</span>
              <span class="stat-text">平均在岗
              <span class="stat-num">101 人</span>，安全帽违规率
              <span class="stat-num">4.8%</span>，安全服违规率
              <span class="stat-num">2.6%</span>。
              </span>
            </div>

            <!-- 机·设备安全 -->
            <div class="stat-item">
              <span class="dim-tag tag-equip">【机】</span>
              <span class="stat-text">设备平均倾角
              <span class="stat-num">1.9°</span>，平均振幅
              <span class="stat-num">1.3mm</span>。
              </span>
            </div>

            <!-- 料·物资防护 -->
            <div class="stat-item">
              <span class="dim-tag tag-material">【料】</span>
              <span class="stat-text">灭火器安放率
              <span class="stat-num">98.9%</span>，围栏完整率
              <span class="stat-num">98.1%</span>，发现积水区域
              <span class="stat-num">30 处</span>。
              </span>
            </div>

            <!-- 法·制度执行 -->
            <div class="stat-item">
              <span class="dim-tag tag-rule">【法】</span>
              <span class="stat-text">吸烟行为
              <span class="stat-num">38 次</span>，火灾隐患
              <span class="stat-num">24 处</span>，陌生人进入
              <span class="stat-num">70 人次</span>。
              </span>
            </div>

            <!-- 环·环境风险 -->
            <div class="stat-item">
              <span class="dim-tag tag-env">【环】</span>
              <span class="stat-text">PM2.5 平均
              <span class="stat-num">125.5</span>，AQI 平均
              <span class="stat-num">133.3</span>，噪声平均
              <span class="stat-num">74.8dB</span>。
              </span>
            </div>

            <!-- 风险提醒（单独突出） -->
            <div class="risk-alert">
              <i class="el-icon-warning-outline risk-icon"></i>
              <span class="risk-text">中等风险提醒！部分维度存在异常，请加强巡查。</span>
            </div>
          </div>
        </el-card>
      </el-aside>

      <el-container class="middle-content">
        <!-- 主内容区：顶部指标、场景图、实时视频 -->
        <el-header class="middle-header">
          <div class="middle-metrics">
            <el-row :gutter="20">
              <el-col style="width: 13.5%">
                <div class="grid-left">
                  <span class="content-value">{{ safetyIndexData && safetyIndexData.personnelSafety ? safetyIndexData.personnelSafety : 0 }}</span>
                  <span class="content-label">人员安全</span>
                </div>
              </el-col>
              <el-col style="width: 13.5%">
                <div class="grid-left">
                  <span class="content-value">{{ safetyIndexData && safetyIndexData.deviceSafety ? safetyIndexData.deviceSafety : 0 }}</span>
                  <span class="content-label">设备安全</span>
                </div>
              </el-col>
              <el-col style="width: 13.5%">
                <div class="grid-left">
                  <span class="content-value">{{ safetyIndexData && safetyIndexData.productionSafety ? safetyIndexData.productionSafety : 0 }}</span>
                  <span class="content-label">生产安全</span>
                </div>
              </el-col>
              <el-col style="width: 19%">
                <div class="grid-content">
                  <span class="content-value">{{ safetyIndexData && safetyIndexData.totalSafety ? safetyIndexData.totalSafety : 0 }}</span>
                  <span class="content-label">安全指数</span>
                </div>
              </el-col>
              <el-col style="width: 13.5%">
                <div class="grid-right">
                  <span class="content-value">{{ safetyIndexData && safetyIndexData.fireSafety ? safetyIndexData.fireSafety : 0 }}</span>
                  <span class="content-label">消防安全</span>
                </div>
              </el-col>
              <el-col style="width: 13.5%">
                <div class="grid-right">
                  <span class="content-value">{{ safetyIndexData && safetyIndexData.environmentSafety ? safetyIndexData.environmentSafety : 0 }}</span>
                  <span class="content-label">环境安全</span>
                </div>
              </el-col>
              <el-col style="width: 13.5%">
                <div class="grid-right">
                  <span class="content-value">89</span>
                  <span class="content-label">其他安全</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <el-main class="middle-main">
          <div class="main-content">
            <el-row :gutter="20" class="main-row" >
              <div v-for="(item, index) in displayData" :key="item.categoryId || index"  style="cursor: pointer" @click="handleRowClick(item.categoryId)">
                <el-col :span="3">
                  <div class="row-content">
                    <span class="content-value">{{ item.totalCount }}</span>
                    <span class="content-label">{{ item.categoryName }}</span>
                  </div>
                </el-col>
              </div>
              <el-col :span="3" v-if="productClassificationData.length > 7">
                <div class="row-content" style="cursor: pointer" @click="toggleExpand">
                  <span class="content-value">{{ '...' }}</span>
                  <span class="content-label">{{ '更多' }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-main>
        <el-footer style="z-index: 1">
          <el-card class="aside-cardA" shadow="hover">
            <div class="card-header">
              <div class="left-header">
                <span class="header-font">实时视频</span>
                <div class="all-icon">
                  <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
                </div>
              </div>
            </div>
            <div class="block">
              <el-carousel
                trigger="click"
                :autoplay="!isLiveVideo"
                :interval=3000
                arrow="always"
                class="carousel-container"
              >
                <el-carousel-item v-for="(chunk, index) in chunks(images, 4)" :key="index">
                  <div class="carousel-group">
                    <div class="image-item" v-for="(image, imgIndex) in chunk" :key="imgIndex">
                      <img :src="getImageUrl(image)" class="carousel-image" @click="sendDevicePush(image)"/>
                      <div class="image-title">{{ image.channelName }}</div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </el-footer>
      </el-container>

      <!-- 右侧边栏：告警信息、远程操控 -->
      <el-aside width="23vw" class="right-aside">
        <el-card class="aside-cardC" shadow="hover">
          <div class="card-header">
            <div class="left-header">
              <span class="header-font">告警信息</span>
              <div class="all-icon">
                <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
              </div>
            </div>
            <div class="right-header">
              <el-form ref="queryAlarmParams" :model="queryAlarmParams" label-width="60px">
                <el-form-item label="总数据" class="custom-label-item">
                  <el-select
                    :popper-append-to-body="false"
                    v-model="queryAlarmParams.dataRange"
                    placeholder="请选择"
                    class="select-box"
                    @change="fetchAlarmData"
                  >
                    <el-option label="日指数" value="day"></el-option>
                    <el-option label="周指数" value="week"></el-option>
                    <el-option label="月指数" value="month"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="card-alarm">
            <el-row :gutter="20">
              <el-col :span="9">
                <div class="alarm-content">
                  <span class="alarm-value">{{ totalCount }}</span>
                  <span class="alarm-label">总告警数量</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="alarm-contentA">
                  <span class="alarm-value">{{ levelACount }}</span>
                  <span class="alarm-img"></span>
                  <span class="alarm-label">A级告警数量</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="alarm-contentB">
                  <span class="alarm-value">{{ levelBCount }}</span>
                  <span class="alarm-img"></span>
                  <span class="alarm-label">B级告警数量</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="alarm-contentC">
                  <span class="alarm-value">{{ levelCCount }}</span>
                  <span class="alarm-img"></span>
                  <span class="alarm-label">C级告警数量</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="alarm-information">
            <div class="alarm-scroll-wrapper">
              <div class="alarm-data" v-for="(item, index) in statisticAlertInfoData" :key="index">
                <div class="data-icon" :style="{'background-image': `url(${getIconUrl(item)})`}"></div>
                <span class="data-level" :class="{'level-a': item.riskLevel === 'A', 'level-b': item.riskLevel === 'B', 'level-c': item.riskLevel === 'C'}">{{ item.riskLevel }}级</span>
                <span class="data-time">{{ item.eventTime }}</span>
                <span class="data-divider">|</span>
                <span class="data-content">{{ item.eventName }}</span>
              </div>
              <!-- 复制一份内容，用于无缝循环（关键） -->
              <!--              <div class="alarm-data" v-for="(item, index) in statisticAlertInfoData" :key="'copy-' + index">-->
              <!--                <div class="data-icon" :style="{'background-image': `url(${getIconUrl(item)})`}"></div>-->
              <!--                <span class="data-level" :class="{'level-a': item.riskLevel === 'A', 'level-b': item.riskLevel === 'B', 'level-c': item.riskLevel === 'C'}">{{ item.riskLevel }}级</span>-->
              <!--                <span class="data-time">{{ item.eventTime }}</span>-->
              <!--                <span class="data-divider">|</span>-->
              <!--                <span class="data-content">{{ item.eventName }}</span>-->
              <!--              </div>-->
            </div>
          </div>
        </el-card>

        <el-card class="aside-cardA" shadow="hover">
          <div class="card-header">
            <div class="left-header">
              <span class="header-font">远程操控</span>
              <div class="all-icon">
                <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
              </div>
            </div>
          </div>
          <div class="card-containerA">
            <el-row>
              <el-col :span="12">
                <div class="remote-control">
                  <span class="control-value">{{ this.images.length }}</span>
                  <span class="control-description">远程喊话</span>
                  <!--                  <span class="control-label">远程喊话</span>-->
                </div>
              </el-col>
              <el-col :span="12">
                <div class="remote-control">
                  <span class="control-value">{{ this.images.length }}</span>
                  <span class="control-description">云台控制</span>
                  <!--                  <span class="control-label">云台控制</span>-->
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="remote-control">
                  <span class="control-value">{{ this.images.length }}</span>
                  <span class="control-description">无人机</span>
                  <!--                  <span class="control-label">远程喊话</span>-->
                </div>
              </el-col>
              <el-col :span="12">
                <div class="remote-control">
                  <span class="control-value">{{ this.images.length }}</span>
                  <span class="control-description">巡检机</span>
                  <!--                  <span class="control-label">云台控制</span>-->
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-aside>
    </el-container>

    <el-dialog :visible.sync="isLiveVideo" class="liveVideoDialog" width="65%" append-to-body @close="handleCloseVideo">
      <!-- 自定义title插槽 -->
      <template #title>
        <div class="dialog-title-text">{{ liveVideoTitle }}</div> <!-- 标题文字加类名 -->
        <div class="all-icon">
          <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
        </div>
      </template>
      <el-tabs id="deviceDetailTab" class="custom-tabs" v-model="activeName" tab-position="top" @tab-click="tabChange" lazy>
        <el-tab-pane name="sipPlayer" lazy>
          <span slot="label">{{ $t('device.device-edit.148398-45') }}</span>
          <device-live-stream ref="deviceLiveStream" />
        </el-tab-pane>

        <el-tab-pane name="sipVideo" lazy>
          <span slot="label">{{ $t('device.device-edit.148398-46') }}</span>
          <deviceVideo ref="deviceVideo" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog :visible.sync="isDataDialog" class="dataDialog" width="65%" append-to-body @close="handleClose">
      <!-- 自定义title插槽 -->
      <template #title>
        <div class="dialog-heard">
          <div>
            <div class="dialog-title-text">{{ titleText }}</div>
            <div class="all-icon">
              <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
            </div>
          </div>
          <div>
            <el-radio-group size="mini" v-model="radio" @change="handleRadioChange">
              <el-radio-button label="日指数"></el-radio-button>
              <el-radio-button label="周指数"></el-radio-button>
              <el-radio-button label="月指数"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>
      <div class="card-container">
        <line-chart
          :chart-data="customDataA"
        />
      </div>
      <div class="dialog-table">
        <el-table v-loading="loading" :data="tableData" :row-key="getRowKey" :border="false" style="width: 100%" :max-height="400">
          <el-table-column prop="majorCodeName" label="安全分类" align="center"></el-table-column>
          <el-table-column prop="eventName" label="事件名称" align="center"></el-table-column>
          <el-table-column label="风险等级" align="center" prop="riskLevel">
            <template slot-scope="scope">
              <el-tag :type="getRiskType(scope.row.riskLevel)">{{ scope.row.riskLevel }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="channelName" label="摄像头名称" align="center"></el-table-column>
          <el-table-column prop="snapshotUrl" label="快照" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.snapshotUrl" :preview-src-list="getBigSnap(scope.row.snapshotUrl)" fit="cover" style="width: 28px; height: 28px">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="事件状态" align="center" prop="status" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.event_confirmed" :value="scope.row.confirmed" />
            </template>
          </el-table-column>
          <el-table-column prop="eventTime" label="事件时间" align="center"></el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="queryTableParams.pageNum" :limit.sync="queryTableParams.pageSize" @pagination="getHiddenDangerAnalysisDetails" />
      </div>
    </el-dialog>

    <el-dialog :visible.sync="isProductList" class="dataDialog" width="65%" append-to-body @close="handleCloseProductList">
      <!-- 自定义title插槽 -->
      <template #title>
        <div class="dialog-heard">
          <div>
            <div class="dialog-title-text">产品列表</div>
            <div class="all-icon">
              <div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
            </div>
          </div>
        </div>
      </template>
      <div class="dialog-table">
        <el-table :data="productClassificationData" style="width: 100%" :max-height="400">
          <el-table-column prop="categoryId" label="分类编号" align="center"></el-table-column>
          <el-table-column prop="categoryName" label="分类名称" align="center"></el-table-column>
          <el-table-column prop="totalCount" label="产品数量" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        </el-table>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css';
import SimpleLineChart from '@/components/simpleLineChart.vue'
import LineChart from '@/components/safetyIndexChart.vue'
import PieChart from '@/components/pieChart.vue'
import deviceLiveStream from '@/views/components/player/deviceLiveStream';
import deviceVideo from '@/views/components/player/deviceVideo.vue';
import { startPlay, closeStream, listChannel } from '@/api/iot/channel';
import { statisticAlertCategoryInfo, statisticAlertInfo, statisticProductCategory, statisticSafetyIndex, getLiveVideo, getSafetyIndex } from '@/api/index';

export default {
  name: 'SiteSafetyDashboard',
  dicts: ['event_confirmed'],
  components: {
    SimpleLineChart,
    LineChart,
    PieChart,
    deviceLiveStream,
    deviceVideo
  },
  data() {
    return {
      mapUrl: 'https://zyqc.kkmap.com/sanwei/#', // 三维地图地址
      // 遮罩层
      loading: true,
      params: {
        tenantId: "1",
      },
      querySafetyParams: {
        tenantId: "1",
        dataRange: "day"
      },
      queryClassificationParams: {
        tenantId: "1",
        dataRange: "day"
      },
      queryAlarmParams: {
        tenantId: "1",
        dataRange: "day"
      },
      safetyIndexData: {
        fireSafety: null,
        totalSafety: null,
        deviceSafety: null,
        environmentSafety: null,
        personnelSafety: null,
        productionSafety: null,
      },
      images: [],
      lineDataA: {
        xData: [],
        seriesData: [],
      },
      lineDataB: {
        xData: [],
        seriesData: [],
      },
      lineDataC: {
        xData: [],
        seriesData: [],
      },
      lineDataD: {
        xData: [],
        seriesData: [],
      },
      lineDataE: {
        xData: [],
        seriesData: [],
      },
      lineDataF: {
        xData: [],
        seriesData: [],
      },
      lineTitleA: null,
      lineTitleB: null,
      lineTitleC: null,
      lineTitleD: null,
      lineTitleE: null,
      lineTitleF: null,
      customData: {
        legendData: [],
        xData: [],
        seriesData1: [],
        seriesData2: [],
        seriesData3: [],
        seriesData4: [],
        seriesData5: [],
        seriesData6: [],
      },
      customDataA: {
        legendData: [],
        xData: [],
        seriesData1: [],
        seriesData2: [],
        seriesData3: [],
        seriesData4: [],
        seriesData5: [],
        seriesData6: [],
        seriesData7: [],
      },
      safetyData: [],
      isExpand: false,
      productClassificationData: [],
      levelACount: 0,
      levelBCount: 0,
      levelCCount: 0,
      totalCount: 0,
      statisticAlertInfoData: [],
      // 弹窗选中选项卡
      activeName: "",
      isLiveVideo: false,
      liveVideoTitle: "",
      imageCache: {},
      isDataDialog: false,
      dataDialogTitle: "",
      titleText: "",
      radio: "日指数",
      // 总条数
      total: 0,
      queryTableParams: {
        tenantId: "1",
        pageNum: 1,
        pageSize: 10,
        dataRange: null,
        indexType: null,
      },
      tableData: [],
      deviceInfo: {},
      isProductList: false,
      safetyTimer: null // 定时器ID（关键：用于后续清除）
    };
  },
  computed: {
    // 计算属性：控制“需要显示的数据”
    displayData() {
      const originData = this.productClassificationData;
      if (originData.length <= 7) {
        // 数据≤6条：显示全部，不显示“更多”按钮（按钮有v-if控制）
        return originData;
      } else {
        // 数据>6条：根据isExpand状态决定显示范围
        return this.isExpand ? originData : originData.slice(0, 7);  // slice(0,6)取前6条
      }
    }
  },
  created() {
    this.getList(),
      this.getHiddenDangerAnalysis(),
      this.fetchSafetyData();
    this.getStatisticSafetyIndex(),
      this.getStatisticProductCategory(),
      this.fetchClassificationData(),
      this.fetchAlarmData()
  },
  mounted() {
    // 每5分钟刷新一次
    this.safetyTimer = setInterval(() => {
      this.getStatisticSafetyIndex();
    }, 300000); // 300000毫秒 = 5分钟
  },
  beforeDestroy() {
    // 清理定时器
    if (this.safetyTimer) {
      clearInterval(this.safetyTimer);
      this.safetyTimer = null;
    }
  },
  methods: {
    //分割方法：每次跳过size个元素
    chunks(arr, size) {
      if (!arr.length) return [];
      const result = [];
      let currentChunk = [];

      arr.forEach((item, idx) => {
        currentChunk.push(item);
        if (currentChunk.length === size || idx === arr.length - 1) {
          result.push(currentChunk);
          currentChunk = [];
        }
      });

      return result;
    },
    // 根据item.level返回对应图片路径
    getIconUrl(item) {
      // 这里替换为你的实际图片路径（注意：Vue中静态资源路径需用require或正确的相对路径）
      const iconMap = {
        'A': require('@/assets/home/dataA.png'), // A级图标路径
        'B': require('@/assets/home/dataB.png'), // B级图标路径
        'C': require('@/assets/home/dataC.png')  // C级图标路径
      };
      // 若level不存在，返回默认图标（可选）
      return iconMap[item.riskLevel] || require('@/assets/home/dataA.png');
    },
    // 获取最终显示的图片URL（对外暴露的方法，供模板调用）
    getImageUrl(row) {
      // 生成唯一标识（用于缓存）
      const key = `${row.deviceSipId}_${row.channelSipId}`;
      // 1. 先查缓存，已判断过的直接返回结果
      if (this.imageCache[key] === 'valid') {
        return this.getSnapUrl(row); // 有效图片
      } else if (this.imageCache[key] === 'invalid') {
        return this.getDefaultImage(); // 无效，返回默认图
      }
      // 2. 未判断过的，先尝试加载图片
      this.checkImageValidity(row);
      // 3. 临时返回默认图（加载完成后会更新）
      return this.getDefaultImage();
    },

    // 拼接图片URL
    getSnapUrl(row) {
      return `https://zyqc.kkmap.com/${process.env.VUE_APP_BASE_API}/profile/snap/${row.deviceSipId}_${row.channelSipId}.jpg`;
    },

    // 获取默认图片
    getDefaultImage() {
      // 确保默认图片路径正确（兼容不同环境）
      return require('@/assets/home/cs.png').default || require('@/assets/home/cs.png');
    },

    // 检查图片是否有效（核心：通过Image对象监听加载状态）
    checkImageValidity(row) {
      const img = new Image();
      const url = this.getSnapUrl(row);
      const key = `${row.deviceSipId}_${row.channelSipId}`;
      // 图片加载成功
      img.onload = () => {
        this.imageCache[key] = 'valid'; // 缓存状态
        this.$forceUpdate(); // 强制更新视图（刷新图片）
      };
      // 图片加载失败（404、跨域等）
      img.onerror = () => {
        this.imageCache[key] = 'invalid'; // 缓存状态
        this.$forceUpdate(); // 强制更新视图（显示默认图）
      };
      // 发送请求加载图片
      img.src = url;
    },
    // 查询实时安全指数
    getStatisticSafetyIndex() {
      statisticSafetyIndex(this.params).then((response) => {
        this.safetyIndexData = response.data;
      });
    },

    //就算平均数
    getAverage(arr) {
      // 处理空数组（避免除以0）
      if (!Array.isArray(arr) || arr.length === 0) {
        return 0; // 或返回 null/提示信息，根据业务需求
      }
      // 计算总和（过滤掉非数字值，避免NaN）
      const sum = arr.reduce((total, current) => {
        // 只累加有效数字（排除 null/undefined/非数字类型）
        return typeof current === 'number' && !isNaN(current) ? total + current : total;
      }, 0);
      // 计算有效数字的数量（用于除法）
      const validCount = arr.filter(item => typeof item === 'number' && !isNaN(item)).length;
      // 避免有效数字为0时除以0
      return validCount === 0 ? 0 : sum / validCount;
    },

    //查询隐患分析
    getHiddenDangerAnalysis() {
      getSafetyIndex(this.querySafetyParams).then((response) => {
        const pad = (num) => num.toString().padStart(2, '0');
        const now = new Date();
        const day = [];
        for (let i = 0; i < 24; i++) {
          const hour = new Date(now);
          hour.setHours(now.getHours() - i);
          const hh = pad(hour.getHours());
          day.push(`${hh}:00`);
        }
        const averageA = this.getAverage(response.data.indexTrends.TOTAL);
        const averageB = this.getAverage(response.data.indexTrends.PERSONNEL);
        const averageC = this.getAverage(response.data.indexTrends.DEVICE);
        const averageD = this.getAverage(response.data.indexTrends.ENVIRONMENT);
        const averageE = this.getAverage(response.data.indexTrends.PRODUCE);
        const averageF = this.getAverage(response.data.indexTrends.FIRE);
        if (averageA >= 80) {
          this.lineTitleA = "低"; // 大于等于80分 → 低
        } else if (averageA >= 60) {
          this.lineTitleA = "中"; // 大于等于60且小于80 → 中（因上一个条件已排除≥80，这里自然满足<80）
        } else {
          this.lineTitleA = "高"; // 小于60 → 高
        }
        if (averageB >= 80) {
          this.lineTitleB = "低"; // 大于等于80分 → 低
        } else if (averageB >= 60) {
          this.lineTitleB = "中"; // 大于等于60且小于80 → 中（因上一个条件已排除≥80，这里自然满足<80）
        } else {
          this.lineTitleB = "高"; // 小于60 → 高
        }
        if (averageC >= 80) {
          this.lineTitleC = "低"; // 大于等于80分 → 低
        } else if (averageC >= 60) {
          this.lineTitleC = "中"; // 大于等于60且小于80 → 中（因上一个条件已排除≥80，这里自然满足<80）
        } else {
          this.lineTitleC = "高"; // 小于60 → 高
        }
        if (averageD >= 80) {
          this.lineTitleD = "低"; // 大于等于80分 → 低
        } else if (averageD >= 60) {
          this.lineTitleD = "中"; // 大于等于60且小于80 → 中（因上一个条件已排除≥80，这里自然满足<80）
        } else {
          this.lineTitleD = "高"; // 小于60 → 高
        }
        if (averageE >= 80) {
          this.lineTitleE = "低"; // 大于等于80分 → 低
        } else if (averageE >= 60) {
          this.lineTitleE = "中"; // 大于等于60且小于80 → 中（因上一个条件已排除≥80，这里自然满足<80）
        } else {
          this.lineTitleE = "高"; // 小于60 → 高
        }
        if (averageF >= 80) {
          this.lineTitleF = "低"; // 大于等于80分 → 低
        } else if (averageF >= 60) {
          this.lineTitleF = "中"; // 大于等于60且小于80 → 中（因上一个条件已排除≥80，这里自然满足<80）
        } else {
          this.lineTitleF = "高"; // 小于60 → 高
        }
        this.lineDataA.seriesData = response.data.indexTrends.TOTAL;
        this.lineDataA.xData = day;
        this.lineDataB.seriesData = response.data.indexTrends.PERSONNEL;
        this.lineDataB.xData = day;
        this.lineDataC.seriesData = response.data.indexTrends.DEVICE;
        this.lineDataC.xData = day;
        this.lineDataD.seriesData = response.data.indexTrends.ENVIRONMENT;
        this.lineDataD.xData = day;
        this.lineDataE.seriesData = response.data.indexTrends.PRODUCE;
        this.lineDataE.xData = day;
        this.lineDataF.seriesData = response.data.indexTrends.FIRE;
        this.lineDataF.xData = day;
      });
    },

    handleClick(value) {
      if (value == "TOTAL") {
        this.titleText = "综合风险";
      } else if (value == "PERSONNEL") {
        this.titleText = "人为风险";
      } else if (value == "DEVICE") {
        this.titleText = "设施风险";
      } else if (value == "ENVIRONMENT") {
        this.titleText = "环境风险";
      } else if (value == "PRODUCE") {
        this.titleText = "生产风险";
      } else if (value == "FIRE") {
        this.titleText = "消防风险";
      }
      this.isDataDialog = true;
      if (this.radio === "日指数") {
        this.queryTableParams.dataRange = "day";
      } else if (this.radio === "周指数") {
        this.queryTableParams.dataRange = "week";
      } else if (this.radio === "月指数") {
        this.queryTableParams.dataRange = "month";
      }
      this.queryTableParams.indexType = value;
      this.getHiddenDangerAnalysisDetails();
    },
    handleRadioChange() {
      if (this.radio === "日指数") {
        this.queryTableParams.dataRange = "day";
      } else if (this.radio === "周指数") {
        this.queryTableParams.dataRange = "week";
      } else if (this.radio === "月指数") {
        this.queryTableParams.dataRange = "month";
      }
      this.getHiddenDangerAnalysisDetails();
    },
    handleClose() {
      this.isDataDialog = false;
    },
    //查询隐患分析详情
    getHiddenDangerAnalysisDetails() {
      this.customDataA.legendData;
      this.customDataA.xData = [];
      this.customDataA.seriesData1 = [];
      this.customDataA.seriesData2 = [];
      this.customDataA.seriesData3 = [];
      this.customDataA.seriesData4 = [];
      this.customDataA.seriesData5 = [];
      this.customDataA.seriesData6 = [];
      this.tableData = [];
      this.total = 0;
      this.loading = true;
      getSafetyIndex(this.queryTableParams).then((response) => {
        const pad = (num) => num.toString().padStart(2, '0');
        // 生成各维度时间点
        const generateTimePoints = () => {
          const now = new Date(); // 当前时间（基准时间）
          const result = {
            day: [],    // 24小时（整点）
            week: [],   // 7天（星期几）
            month: []   // 30天（日期）
          };
          // 1. day：当前小时 + 前23小时（共24个整点，格式 HH:00）
          for (let i = 0; i < 24; i++) {
            const hour = new Date(now);
            hour.setHours(now.getHours() - i); // 每次减i小时（i=0是当前小时，i=23是前23小时）
            const hh = pad(hour.getHours());
            result.day.push(`${hh}:00`);
          }
          // 按时间从早到晚排序（最早的前23小时 → 当前小时）
          result.day = result.day.reverse();
          // 2. week：今天 + 前6天（共7天，格式 星期X）
          const weekNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
          for (let i = 0; i < 7; i++) {
            const day = new Date(now);
            day.setDate(now.getDate() - i); // 每次减i天（i=0是今天，i=6是前6天）
            const weekIndex = day.getDay(); // 0=周日，1=周一...6=周六
            result.week.push(weekNames[weekIndex]);
          }
          // 按时间从早到晚排序（最早的前6天 → 今天）
          result.week = result.week.reverse();
          // 3. month：今天 + 前29天（共30天，格式 日期数字）
          for (let i = 0; i < 30; i++) {
            const day = new Date(now);
            day.setDate(now.getDate() - i); // 每次减i天（i=0是今天，i=29是前29天）
            const date = day.getDate(); // 1-31（自动处理跨月，如10月1日减1天=9月30日）
            result.month.push(date.toString());
          }
          // 按时间从早到晚排序（最早的前29天 → 今天）
          result.month = result.month.reverse();
          return result;
        };
        // 生成符合规则的时间点列表
        const expected = generateTimePoints();
        // 主逻辑：根据dataRange判断
        if (this.queryTableParams.dataRange === "day") {
          this.customDataA.xData = expected.day;
        } else if (this.queryTableParams.dataRange === "week") {
          this.customDataA.xData = expected.week
        } else if (this.queryTableParams.dataRange === "month") {
          this.customDataA.xData = expected.month
        }

        if (this.queryTableParams.indexType == "TOTAL") {
          this.customDataA.legendData = ['安全指数', '人员安全', '生产安全', '设备安全', '消防安全', '环境安全'];
          this.customDataA.seriesData1 = response.data.indexTrends.TOTAL;
          this.customDataA.seriesData2 = response.data.indexTrends.PERSONNEL;
          this.customDataA.seriesData3 = response.data.indexTrends.PRODUCE;
          this.customDataA.seriesData4 = response.data.indexTrends.DEVICE;
          this.customDataA.seriesData5 = response.data.indexTrends.FIRE;
          this.customDataA.seriesData6 = response.data.indexTrends.ENVIRONMENT;
        } else if (this.queryTableParams.indexType == "PERSONNEL") {
          this.customDataA.legendData = ['人员安全'];
          this.customDataA.seriesData2 = response.data.indexTrends.PERSONNEL;
        } else if (this.queryTableParams.indexType == "DEVICE") {
          this.customDataA.legendData = ['设备安全'];
          this.customDataA.seriesData4 = response.data.indexTrends.DEVICE;
        } else if (this.queryTableParams.indexType == "ENVIRONMENT") {
          this.customDataA.legendData = ['环境安全'];
          this.customDataA.seriesData6 = response.data.indexTrends.ENVIRONMENT;
        } else if (this.queryTableParams.indexType == "PRODUCE") {
          this.customDataA.legendData = ['生产安全'];
          this.customDataA.seriesData3 = response.data.indexTrends.PRODUCE;
        } else if (this.queryTableParams.indexType == "FIRE") {
          this.customDataA.legendData = ['消防安全'];
          this.customDataA.seriesData5 = response.data.indexTrends.FIRE;
        }
        this.tableData = response.data.dataTable.rows;
        this.total = response.data.dataTable.total;
        this.loading = false;
      });
      this.loading = false;
    },

    //查询安全指数
    fetchSafetyData() {
      getSafetyIndex(this.querySafetyParams).then((response) => {
        const pad = (num) => num.toString().padStart(2, '0');
        // 生成各维度时间点
        const generateTimePoints = () => {
          const now = new Date(); // 当前时间（基准时间）
          const result = {
            day: [],    // 24小时（整点）
            week: [],   // 7天（星期几）
            month: []   // 30天（日期）
          };
          // 1. day：当前小时 + 前23小时（共24个整点，格式 HH:00）
          for (let i = 0; i < 24; i++) {
            const hour = new Date(now);
            hour.setHours(now.getHours() - i); // 每次减i小时（i=0是当前小时，i=23是前23小时）
            const hh = pad(hour.getHours());
            result.day.push(`${hh}:00`);
          }
          // 按时间从早到晚排序（最早的前23小时 → 当前小时）
          result.day = result.day.reverse();
          // 2. week：今天 + 前6天（共7天，格式 星期X）
          const weekNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
          for (let i = 0; i < 7; i++) {
            const day = new Date(now);
            day.setDate(now.getDate() - i); // 每次减i天（i=0是今天，i=6是前6天）
            const weekIndex = day.getDay(); // 0=周日，1=周一...6=周六
            result.week.push(weekNames[weekIndex]);
          }
          // 按时间从早到晚排序（最早的前6天 → 今天）
          result.week = result.week.reverse();
          // 3. month：今天 + 前29天（共30天，格式 日期数字）
          for (let i = 0; i < 30; i++) {
            const day = new Date(now);
            day.setDate(now.getDate() - i); // 每次减i天（i=0是今天，i=29是前29天）
            const date = day.getDate(); // 1-31（自动处理跨月，如10月1日减1天=9月30日）
            result.month.push(date.toString());
          }
          // 按时间从早到晚排序（最早的前29天 → 今天）
          result.month = result.month.reverse();
          return result;
        };
        // 生成符合规则的时间点列表
        const expected = generateTimePoints();
        // 主逻辑：根据dataRange判断
        if (this.querySafetyParams.dataRange === "day") {
          this.customData.xData = expected.day;
        } else if (this.querySafetyParams.dataRange === "week") {
          this.customData.xData = expected.week
        } else if (this.querySafetyParams.dataRange === "month") {
          this.customData.xData = expected.month
        }
        this.customData.legendData = ['安全指数', '人员安全', '生产安全', '设备安全', '消防安全', '环境安全'];
        this.customData.seriesData1 = response.data.indexTrends.TOTAL;
        this.customData.seriesData2 = response.data.indexTrends.PERSONNEL;
        this.customData.seriesData3 = response.data.indexTrends.PRODUCE;
        this.customData.seriesData4 = response.data.indexTrends.DEVICE;
        this.customData.seriesData5 = response.data.indexTrends.FIRE;
        this.customData.seriesData6 = response.data.indexTrends.ENVIRONMENT;
      });
    },

    /** 查询监控设备通道信息列表 */
    getList() {
      getLiveVideo(this.params).then((response) => {
        this.images = response.data;
      });
    },
    // 查询产品分类
    getStatisticProductCategory() {
      statisticProductCategory(this.params).then((response) => {
        this.productClassificationData = response.data;
      })
    },
    // 切换展开/收起状态
    toggleExpand() {
      this.isProductList = true;
    },
    handleRowClick(categoryId) {
      this.$router.push({
        path: '/equipmentMonitoring',
        query: {
          categoryId: categoryId,
        },
      });
      this.$bus.$emit('callBMethod');
    },
    handleCloseProductList() {
      this.isProductList = false;
    },
    //获取AI分析
    fetchClassificationData() {
      // statisticAlertCategoryInfo(this.queryClassificationParams).then((response) => {
      //   this.safetyData = response.data.map(item => ({
      //     name: item.label, // 映射名称
      //     value: item.count // 映射数值
      //   }));
      // })
    },
    //获取告警信息
    fetchAlarmData() {
      statisticAlertInfo(this.queryAlarmParams).then((response) => {
        this.statisticAlertInfoData = response.data.eventList;
        this.levelACount = response.data.levelACount;
        this.levelBCount = response.data.levelBCount;
        this.levelCCount = response.data.levelCCount;
        this.totalCount = response.data.totalCount;
      })
    },
    sendDevicePush(itemData) {
      this.isLiveVideo = true; // 显示弹窗
      this.liveVideoTitle = itemData.channelName + "实时视频";
      this.activeName = "sipPlayer";
      this.deviceInfo = itemData;
      this.$nextTick(() => {
        this.$refs.deviceLiveStream.deviceInfo = this.deviceInfo;
        this.$refs.deviceLiveStream.changeChannel();
      });
    },
    handleCloseVideo() {
      this.deviceInfo = {};
      this.isLiveVideo = false;
      this.$refs.deviceLiveStream.closeDestroy(false);
    },
    /** 选项卡改变事件*/
    tabChange(panel) {
      this.$nextTick(() => {
        //关闭直播流
        if (panel.name !== 'sipPlayer') {
          console.log('选项板切换，关闭直播推流！');
          this.$refs.deviceLiveStream.closeDestroy(false);
        }
        //关闭录像流
        if (panel.name !== 'sipVideo') {
          console.log('选项板切换，关闭录像推流！');
          this.$refs.deviceVideo.closeDestroy();
          this.$refs.deviceLiveStream.deviceInfo = this.deviceInfo;
          this.$refs.deviceLiveStream.changeChannel();
        }
      });
    },
    // 风险等级映射到预设类型
    getRiskType(riskLevel) {
      switch (riskLevel) {
        case "A":
          return "danger";
        case "B":
          return "warning";
        case "C":
          return "success";
        default:
          return "default"; // 默认类型（灰色）
      }
    },
    getBigSnap: function (snapshotUrl) {
      return [snapshotUrl];
    },
    getRowKey(row){
      return row.id;
    },
  }
};
</script>

<style lang="scss" scoped>
/* 全局容器：占满视口高度，深色背景 */
* {
  box-sizing: border-box;
}
.dashboard-container {
  min-height: calc(100vh - (72 / 1080 * 100vh));
  width: 100vw;
  color: #fff;
  display: flex;
  flex: 1;
}

.map-background {
  position: absolute; // 绝对定位，脱离文档流
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; // 设为底层，确保上层内容正常显示
  overflow: hidden; // 隐藏地图超出容器的部分
}

.map-iframe {
  width: 100%;
  height: 100%;
  transform: scale(1); // 确保地图铺满容器
  transform-origin: top left; // 缩放原点对齐容器左上角
}

/* 左右边栏：固定宽度、深色背景、滚动适配 */
.left-aside,
.right-aside {
  z-index: 1;
  margin: px2vh(10) px2vw(10) 0 px2vw(10);
  background-color: rgba(10, 43, 92, 0);

  ::v-deep .el-carousel__container {
    height: 26.7vh !important;
  }
}

/* 通用卡片：统一深色背景、白色文字 */
.aside-card {
  background: rgba(0,11,61,0.8);
  color: #fff;
  margin-bottom: px2vh(10);
  height: px2vh(340);
  border-width: #{px2vw(1)};
  border-style: solid;

  // 2. 渐变边框背景（核心样式，颜色部分无需转换）
  border-image: linear-gradient(
      180deg,
      rgba(22, 93, 255, 0),
      rgba(22, 93, 255, 0.59),
      rgba(22, 93, 255, 1)
  ) 1 1;
}

.aside-cardA {
  z-index: 1;
  background: rgba(0,11,61,0.8);
  color: #fff;
  margin-bottom: px2vh(10);
  height: px2vh(288);
  border-width: #{px2vw(1)};
  border-style: solid;

  // 2. 渐变边框背景（核心样式，颜色部分无需转换）
  border-image: linear-gradient(
      180deg,
      rgba(22, 93, 255, 0),
      rgba(22, 93, 255, 0.59),
      rgba(22, 93, 255, 1)
  ) 1 1;
}
.block {
  height: px2vh(246);
}

.carousel-container {
  width: 100%;
}

.carousel-group {
  display: flex; /* 使用 Flexbox 横向排列图片 */
  justify-content: space-between; /* 使图片间隔均匀 */
  align-items: flex-start;
  gap: px2vw(10);
}

.image-item {
  display: flex;
  flex-direction: column; /* 图片在上，标题在下（垂直排列） */
  align-items: center; /* 内部元素水平居中（关键：标题居中） */
  width: 100%;
}

.carousel-image {
  height: px2vh(184);
  //width: px2vw(232);
  width: 100%;
}

.image-title {
  margin-top: px2vh(5);
  width: px2vw(100);
  height: px2vh(22);
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: px2font(14);
  color: #FFFFFF;
  line-height: px2vh(22);
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-carousel__container {
  height: px2vh(226);
}

.aside-cardC {
  background: rgba(0,11,61,0.8);
  color: #fff;
  margin-bottom: px2vh(10);
  height: px2vh(690);
  border-width: #{px2vw(1)};
  border-style: solid;

  // 2. 渐变边框背景（核心样式，颜色部分无需转换）
  border-image: linear-gradient(
      180deg,
      rgba(22, 93, 255, 0),
      rgba(22, 93, 255, 0.59),
      rgba(22, 93, 255, 1)
  ) 1 1;
}

.card-header {
  height: px2vh(42);
  display: flex;              /* 启用Flex布局 */
  flex-direction: row;        /* 子元素水平并排（默认值，可省略） */
  align-items: center;        /* 垂直居中对齐 */
  justify-content: space-between; /* 三个元素两端对齐，中间自动分配空间 */
  margin-bottom: px2vh(10);
}

.left-header {
  display: flex;
  border-radius: 0px 0px 0px 0px;
  font-weight: bold;
  display: flex;          /* 启用 Flex 布局 */
  flex-direction: column; /* 子元素垂直排列（上：span，下：all-icon） */
  align-items: flex-start;/* 水平左对齐（与“隐患分析”文字对齐，可选） */
  gap: px2vh(1);               /* 文字和图标之间的间距（可按需调整，如 10px） */
}

.header-font {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: px2font(16);
  line-height: px2vh(24);
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-input--medium .el-input__inner {
  height: px2vh(36);
  line-height: px2vh(36) !important;
}
::v-deep .el-input--medium .el-input__icon {
  height: px2vh(36);
  line-height: px2vh(36) !important;
  font-size: px2font(14)
}
// 选择框样式（适配大屏）
.select-box {
  width: px2vw(120);
  height: px2vh(36);
  line-height: px2vh(36);

  // 穿透修改Element UI选择框的内部样式（可选）
  ::v-deep .el-input__inner {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(22, 93, 255, 0.5);
    color: #fff; /* 文字颜色 */
    font-size: px2font(14);
    padding: 0 px2vw(30) 0 px2vw(15);
  }
  ::v-deep .el-select-dropdown__item:hover {
    background-color: rgba(22, 93, 255, 0.9);
    color: #fff; // 可选： hover 时文字变白，增强对比度
  }
  ::v-deep .el-select-dropdown__item.selected {
    background-color: rgba(22, 93, 255, 0.7);
    color: #fff;
  }
  ::v-deep .el-select-dropdown__item {
    color: white;
  }
  ::v-deep .el-select-dropdown {
    background: rgba(0,11,61, 0.9);
    border-image: linear-gradient(
        180deg,
        rgba(22, 93, 255, 0),
        rgba(22, 93, 255, 0.59),
        rgba(22, 93, 255, 1)
    ) 1 1;
  }
}

.all-icon {
  display: flex;          /* 启用 Flex 布局 */
  gap: px2vw(5);         /* 图标之间的间距（可按需调整，避免拥挤） */
  align-items: center;    /* 图标垂直居中（防止图标大小不一导致错位） */

  .icon {
    width: px2vw(7);
    height: px2vh(10);
    background: linear-gradient( 45deg, #165DFF 0%, #00F6FF 100%);
    transform: skew(-15deg);
  }
}

.card-container {
  height: px2vh(268);
}
.card-containerA {
  height: px2vh(228);
}
// 容器整体样式：深色背景+圆角+内边距，贴合项目主题
.card-containerText {
  height: px2vh(228);
}

// 每个统计项：上下间距+行高优化
.stat-item {
  display: flex;
  align-items: center;
  margin-bottom: px2vh(5);
  line-height: px2vh(24); // 行高舒适，避免文字拥挤

  // 最后一个统计项去掉底部间距
  &:last-of-type {
    margin-bottom: px2vh(10);
  }
}

// 维度标签（【人】【机】等）：颜色区分+背景+圆角，快速识别维度
.dim-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: px2vw(40);
  height: px2vh(22);
  border-radius: px2vw(4);
  font-weight: 600;
  color: #fff;
  margin-right: px2vw(8);
  flex-shrink: 0; // 防止标签被压缩
}

// 不同维度标签的专属颜色
.tag-person { background: #2563e0; }   // 人：蓝色
.tag-equip { background: #67c23a; }    // 机：绿色
.tag-material { background: #fa8c16; } // 料：橙色
.tag-rule { background: #f56c6c; }     // 法：红色
.tag-env { background: #909399; }      // 环：灰色

// 统计文字基础样式
.stat-text {
  font-size: px2font(12);
  color: rgba(255, 255, 255, 0.9); // 主文字浅白，避免刺眼
}

// 关键数据（数字部分）：加粗+高亮色，让数据一眼可见
.stat-num {
  font-weight: 700;
  color: #fff;
  margin: 0 px2vw(2);
}

// 风险提醒：橙色突出+图标，强化警示性
.risk-alert {
  display: flex;
  align-items: center;
  padding: px2vw(6);
  background: rgba(250, 140, 22, 0.15); // 浅橙背景
  border-left: px2vw(3) solid #fa8c16; // 橙色左线强调
  border-radius: px2vw(4);
  margin-top: px2vh(6);
}

// 风险图标：橙色+放大
.risk-icon {
  color: #fa8c16;
  font-size: px2font(16);
  margin-right: px2vw(8);
}

// 风险文字：加粗+橙色，突出提醒内容
.risk-text {
  font-size: px2font(14);
  font-weight: 500;
  color: #fa8c16;
}

.risk-chart-placeholder {
  width: 100%;
  height: px2vh(127);
  /*background: rgba(255, 255, 255, 0.1);*/
  background-image: url('../assets/home/card.png'); /* 替换为实际图片路径 */
  background-size: 100% 100%;
  border-radius: px2vw(4);
  margin: #{px2vw(5)} 0;
}
.risk-chart-placeholder-text {
  height: px2vh(30);
  line-height: px2vh(30);
  /* 核心：flex布局 + 两端对齐 */
  display: flex;          /* 启用flex布局 */
  justify-content: space-between; /* 子元素两端对齐（一个居左，一个居右） */
  padding: px2vh(5) px2vw(10) px2vh(5) px2vw(10);        /* 左右留一点内边距，避免文字贴边 */
}

.risk-title {
  height: px2vh(30);
  line-height: px2vh(30);
}

.text-only-btn ::v-deep .el-button {
  /* 移除边框和背景 */
  border: none !important;
  background: transparent !important;
}
.custom-btn {
  font-size: px2font(16); /* 自定义按钮文字大小 */
  color: #fff; /* 自定义按钮文字颜色 */
  padding: 0;
}
.custom-icon {
  font-size: px2font(16);
  margin-left: px2vw(5); /* 图标和文字之间的间距 */
  //vertical-align: middle; /* 确保图标与文字垂直居中对齐 */
}

.risk-level {
  display: inline-block;
  padding: #{px2vw(2)} #{px2vw(8)};
  border-radius: px2vw(4);
  font-size: px2font(22);
}

.risk-chart-placeholder-chart {
  padding-top: px2vh(15);
}

/* 主内容区：弹性填充、内边距、滚动适配 */
.middle-content {
  padding: 0 0 px2vh(10) 0;
}

.middle-header {
  z-index: 1;
}

.middle-metrics {
  padding: 0 px2vw(40) 0 px2vw(40);
}

.grid-left {
  height: px2vh(82);
  background-color: rgba(10, 43, 92, 0);
  background-image: url('../assets/home/main-topB.png'); /* 替换为实际图片路径 */
  background-size: 100% 100%;
  margin-top: px2vh(10);
  /* 1. 开启Flex布局 */
  display: flex;
  /* 2. 子元素垂直排列（上到下） */
  flex-direction: column;
  /* 3. 垂直方向居中（主轴居中） */
  justify-content: center;
  /* 4. 水平方向居中（交叉轴居中） */
  align-items: center;

  .content-value {
    font-family: Nunito Sans, Nunito Sans;
    font-weight: 700;
    font-size: px2font(20);
    color: #00B53C;
    line-height: px2vh(32);
    text-shadow: 0px 0px 8px rgba(255,255,255,0.3);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .content-label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: px2font(13);
    color: #FFFFFF;
    line-height: px2vh(22);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.grid-content {
  height: px2vh(98);
  background-color: rgba(10, 43, 92, 0);
  background-image: url('../assets/home/main-topA.png'); /* 替换为实际图片路径 */
  background-size: 100% 100%;
  /* 1. 开启Flex布局 */
  display: flex;
  /* 2. 子元素垂直排列（上到下） */
  flex-direction: column;
  /* 3. 垂直方向居中（主轴居中） */
  justify-content: center;
  /* 4. 水平方向居中（交叉轴居中） */
  align-items: center;

  .content-value {
    font-family: Nunito Sans, Nunito Sans;
    font-weight: 800;
    font-size: px2font(30);
    color: #00B53C;
    line-height: px2vh(38);
    text-shadow: 0px 0px 8px rgba(255,255,255,0.3);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .content-label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: px2font(16);
    color: #165DFF;
    line-height: px2vh(24);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.grid-right {
  height: px2vh(82);
  background-color: rgba(10, 43, 92, 0);
  background-image: url('../assets/home/main-topC.png'); /* 替换为实际图片路径 */
  background-size: 100% 100%;
  margin-top: px2vh(10);
  /* 1. 开启Flex布局 */
  display: flex;
  /* 2. 子元素垂直排列（上到下） */
  flex-direction: column;
  /* 3. 垂直方向居中（主轴居中） */
  justify-content: center;
  /* 4. 水平方向居中（交叉轴居中） */
  align-items: center;

  .content-value {
    font-family: Nunito Sans, Nunito Sans;
    font-weight: 700;
    font-size: px2font(20);
    color: #00B53C;
    line-height: px2vh(32);
    text-shadow: 0px 0px 8px rgba(255,255,255,0.3);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .content-label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: px2font(13);
    color: #FFFFFF;
    line-height: px2vh(22);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.middle-main {
  position: relative;
  height: 100%;
  padding: 0;
  margin: 0;
  //padding-bottom: px2vh(20);
}

.main-content {
  z-index: 1;
  padding: 0 px2vw(150) px2vh(20) px2vw(150);
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
}

.row-content {
  height: px2vh(78);
  width: px2vw(78);
  background-color: rgba(10, 43, 92, 0);
  background-image: url('../assets/home/main-bottom.png'); /* 替换为实际图片路径 */
  background-size: 100% 100%;
  /* 1. 开启Flex布局 */
  display: flex;
  /* 2. 子元素垂直排列（上到下） */
  flex-direction: column;
  /* 3. 垂直方向居中（主轴居中） */
  justify-content: center;
  /* 4. 水平方向居中（交叉轴居中） */
  align-items: center;

  .content-value {
    font-family: Nunito Sans, Nunito Sans;
    font-weight: 700;
    font-size: px2font(24);
    color: #FFFFFF;
    line-height: px2vh(32);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .content-label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: px2font(13);
    color: #FFFFFF;
    line-height: px2vh(22);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.card-alarm {
  line-height: px2vh(150);
  .alarm-content {
    position: relative;
    bottom: px2vh(15);
    right: px2vw(30);
    background-image: url('../assets/home/alarmAll.png'); /* 替换为实际图片路径 */
    background-size: 100% 100%;
    height: px2vh(180);
    width: px2vw(188);
    /* 1. 开启Flex布局 */
    display: flex;
    /* 2. 子元素垂直排列（上到下） */
    flex-direction: column;
    /* 3. 垂直方向居中（主轴居中） */
    justify-content: center;
    /* 4. 水平方向居中（交叉轴居中） */
    align-items: center;
    margin-bottom: px2vh(-20);

    .alarm-value {
      font-family: Nunito Sans, Nunito Sans;
      font-weight: 800;
      font-size: px2font(30);
      color: #01E1A9;
      line-height: px2vh(38);
      text-shadow: 0px 0px 10px rgba(0,0,0,0.4);
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .alarm-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: px2font(16);
      color: #FFFFFF;
      line-height: px2vh(38);
      text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .alarm-contentA {
    /* 1. 开启Flex布局 */
    display: flex;
    /* 2. 子元素垂直排列（上到下） */
    flex-direction: column;
    /* 3. 垂直方向居中（主轴居中） */
    justify-content: center;
    /* 4. 水平方向居中（交叉轴居中） */
    align-items: center;
    margin-top: px2vh(20);

    .alarm-value {
      font-family: Nunito Sans, Nunito Sans;
      font-weight: 700;
      font-size: px2font(24);
      color: #F53F3F;
      line-height: px2vh(32);
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .alarm-img {
      height: px2vh(28);
      width: px2vw(28);
      background-image: url('../assets/home/alarmA.png'); /* 替换为实际图片路径 */
      background-size: 100% 100%;
    }

    .alarm-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: px2font(14);
      color: #FFFFFF;
      line-height: px2vh(16);
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .alarm-contentB {
    /* 1. 开启Flex布局 */
    display: flex;
    /* 2. 子元素垂直排列（上到下） */
    flex-direction: column;
    /* 3. 垂直方向居中（主轴居中） */
    justify-content: center;
    /* 4. 水平方向居中（交叉轴居中） */
    align-items: center;
    margin-top: px2vh(20);

    .alarm-value {
      font-family: Nunito Sans, Nunito Sans;
      font-weight: 700;
      font-size: px2font(24);
      color: #FF7D00;
      line-height: px2vh(32);
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .alarm-img {
      height: px2vh(28);
      width: px2vw(28);
      background-image: url('../assets/home/alarmB.png'); /* 替换为实际图片路径 */
      background-size: 100% 100%;
    }

    .alarm-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: px2font(14);
      color: #FFFFFF;
      line-height: px2vh(16);
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .alarm-contentC {
    /* 1. 开启Flex布局 */
    display: flex;
    /* 2. 子元素垂直排列（上到下） */
    flex-direction: column;
    /* 3. 垂直方向居中（主轴居中） */
    justify-content: center;
    /* 4. 水平方向居中（交叉轴居中） */
    align-items: center;
    margin-top: px2vh(20);

    .alarm-value {
      font-family: Nunito Sans, Nunito Sans;
      font-weight: 700;
      color: #00B42A;
      font-size: px2font(24);
      line-height: px2vh(32);
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .alarm-img {
      height: px2vh(28);
      width: px2vw(28);
      background-image: url('../assets/home/alarmC.png'); /* 替换为实际图片路径 */
      background-size: 100% 100%;
    }

    .alarm-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: px2font(14);
      color: #FFFFFF;
      line-height: px2vh(16);
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

.alarm-information {
  height: px2vh(450);
  //overflow-y: auto;
  //overflow-x: hidden;
  overflow: hidden;
  position: relative;
}

.alarm-scroll-wrapper {
  /* 2. 内容容器：通过动画滚动 */
  animation: scrollUp 60s linear infinite; /* 15秒滚动一次，匀速，无限循环 */
}

/* 3. 定义滚动动画 */
@keyframes scrollUp {
  0% {
    transform: translateY(0); /* 初始位置：顶部 */
  }
  100% {
    transform: translateY(-100%); /* 滚动到一半（因为复制了一份内容，刚好显示第二份的开始） */
  }
}

/* 4. 鼠标悬停暂停滚动（提升体验） */
.alarm-information:hover .alarm-scroll-wrapper {
  animation-play-state: paused; /* 暂停动画 */
}

.alarm-data {
  display: flex;
  align-items: center;
  /* 核心：强制一行显示 */
  white-space: nowrap;
  /* 可选：溢出时隐藏并显示省略号（需容器宽度有限时生效） */
  overflow: hidden;
  text-overflow: ellipsis;
  //width: px2vw(360);
  width: 100%;
  height: px2vh(38);
  background: rgba(22,93,255,0.2);
  border-radius: px2vw(1) px2vw(1) px2vw(1) px2vw(1);
  margin-bottom: px2vh(5);
}

.data-icon {
  width: px2vw(20);
  height: px2vh(20);
  margin: 0 px2vw(10) 0 px2vw(10);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.data-time {
  width: px2vw(134);
  height: px2vh(22);
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: px2font(14);
  color: #FFFFFF;
  line-height: px2vh(22);
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-right: px2vw(10);
}
/* 等级文字颜色区分 */
.data-level {
  width: px2vw(25);
  height: px2vh(22);
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: px2font(14);
  color: #00B42A;
  line-height: px2vh(22);
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-right: px2vw(10);
}
/* 通过动态class定义不同等级的颜色 */
.level-a { color: #F53F3F; } /* A级红色 */
.level-b { color: #FF7D00; } /* B级橙色 */
.level-c { color: #00B42A; } /* C级绿色 */

.data-divider {
  width: px2vw(14);
  height: px2vh(22);
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: px2font(14);
  color: rgba(255,255,255,0.2);
  line-height: px2vh(22);
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-right: px2vw(10);
}

.data-content {
  width: px2vw(132);
  height: px2vh(22);
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: px2font(14);
  color: #FFFFFF;
  line-height: px2vh(22);
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.remote-control {
  /* 1. 开启Flex布局 */
  display: flex;
  /* 2. 子元素垂直排列（上到下） */
  flex-direction: column;
  /* 3. 垂直方向居中（主轴居中） */
  justify-content: center;
  /* 4. 水平方向居中（交叉轴居中） */
  align-items: center;
  margin-top: px2vh(10);

  .control-value {
    font-family: Nunito Sans, Nunito Sans;
    font-weight: 800;
    font-size: px2font(30);
    color: #FFFFFF;
    line-height: px2vh(38);
    text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .control-description {
    width: px2vw(200);
    height: px2vh(45);
    background-image: url('../assets/home/right.png'); /* 替换为实际图片路径 */
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: px2font(16);
    color: rgba(255,255,255,0.8);
    line-height: px2vh(24);
    text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .control-label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: px2font(20);
    line-height: px2vh(28);
    text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    text-align: center;
    font-style: normal;
    text-transform: none;
    /* 核心：垂直渐变（上白下蓝，50%位置分割） */
    background: linear-gradient(to bottom, #ffffff 65%, #2554bf 35%);
    -webkit-background-clip: text; /* 兼容 Chrome/Safari 等 WebKit 内核浏览器 */
    //background-clip: text;         /* 裁剪背景到文字轮廓 */
    color: transparent;            /* 文字透明，露出渐变背景 */
  }
}

::v-deep .el-card__body {
  padding: px2vh(5) px2vw(20) px2vh(20) px2vw(20);
}

::v-deep .el-footer {
  height: px2vh(288) !important;
  padding: 0;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .custom-label-item .el-form-item__label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: px2font(14);
  color: #FFFFFF;
  //line-height: px2vh(28);
  font-style: normal;
  text-transform: none;
}

//.liveVideoDialog {
//  margin-top: px2vh(12) !important;
//}

::v-deep .el-dialog {
  margin-top: 8vh !important;
  background: rgba(0,11,61,0.79);
}
::v-deep .el-icon-close {
  color: #fff;
}

.dialog-title-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: px2font(16);
  color: #fff;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-dialog__body {
  padding: px2vh(10) px2vw(20);
  font-size: px2font(14);
}

::v-deep .el-tabs__item {
  font-size: px2font(14);
  color: #fff;
}

.dialog-heard {
  display: flex; /* 启用flex布局 */
  justify-content: space-between; /* 关键：子元素两端对齐（左在首，右在尾） */
  width: 100%; /* 确保容器占满父宽度，否则可能挤在一起 */
  padding-right: 40px;
}
.dialog-table {
  //height: px2vh(590);
  padding-top: px2vh(20);
  padding-bottom: px2vh(20);
  ::v-deep .el-table {
    border: none !important;
  }
  /* 2. 表头底下线条 */
  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }

  /* 2. 表头背景（列标题区域） */
  ::v-deep .el-table tr {
    height: px2vh(45);
    background: rgba(22,93,255);;
  }
  /* 2. 表头字体大小（列标题区域） */
  ::v-deep .el-table th.el-table__cell>.cell {
    font-size: px2font(14);
  }

  /* 3. 表格体背景（数据行区域） */
  /* 3.1 普通行背景 */
  ::v-deep .el-table__body-wrapper,
  ::v-deep .el-table__row {
    background: rgba(0,11,61,0.79) !important; /* 普通行背景（示例：白色） */
  }
  /* 3.1 普通行字体大小 */
  ::v-deep .el-table td.el-table__cell div {
    font-size: px2font(14);
  }
  /* 表格体单元格背景（确保与行背景一致） */
  ::v-deep .el-table__cell {
    //background-color: inherit !important; /* 继承行背景 */
    background: rgba(0,11,61,0.79) !important; /* 表格体文字颜色（可选） */
    border-right: none !important; /* 移除单元格右侧边框 */
    border-left: none !important; /* 移除单元格左侧边框（通常默认无，但保险起见） */
    border: 1px solid rgba(255,255,255,0.1);
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  /* 4. 行 hover 状态背景（鼠标悬停时） */
  ::v-deep .el-table__row:hover {
    background: rgba(22,93,255,0.4) !important; /* hover 背景（示例：淡蓝） */
  }

  /* 5. 表格边框颜色（可选：与背景色协调） */
  ::v-deep .el-table__border,
  ::v-deep .el-table-cell {
    background: rgba(0,11,61,0.79) !important; /* 边框颜色（示例：浅灰） */
  }

  ::v-deep .el-table--border::after, .el-table--group::after {
    width: 0 !important;
  }

  ::v-deep .el-table::before {
    height: 0 !important;
  }


  /* 1. 分页组件整体文字颜色（基础设置） */
  ::v-deep .el-pagination {
    color: #ffffff !important; /* 默认文字颜色（示例：深灰色） */
  }

  ::v-deep input.el-input__inner {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(22, 93, 255, 0.5);
    color: #ffffff;
  }

  ::v-deep button.btn-prev {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(22, 93, 255, 0.5);
    color: #ffffff;
  }

  ::v-deep button.btn-next {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(22, 93, 255, 0.5);
    color: #ffffff;
  }

  /* 2. 页码按钮文字颜色 */
  ::v-deep .el-pager li {
    color: #ffffff !important; /* 普通页码文字 */
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(22, 93, 255, 0.5) !important;
  }

  /* 3. 当前选中页码的文字颜色 */
  ::v-deep .el-pager li.active {
    background-color: #409EFF !important;
    color: #ffffff !important; /* 选中页码文字（通常与背景色对比） */
  }

  /* 4. 上一页/下一页按钮文字颜色 */
  ::v-deep .el-pagination__prev,
  ::v-deep .el-pagination__next {
    color: #ffffff !important; /* 箭头按钮文字 */
  }

  /* 5. 禁用状态（如第一页的"上一页"）的文字颜色 */
  ::v-deep .el-pagination__prev.is-disabled,
  ::v-deep .el-pagination__next.is-disabled {
    color: #ffffff !important; /* 禁用状态文字（示例：浅灰色） */
  }

  /* 6. 总条数/跳转文本的颜色（如"共 100 条"） */
  ::v-deep .el-pagination__total,
  ::v-deep .el-pagination__jump {
    color: #ffffff !important; /* 说明文字颜色 */
  }

  /* 7. 页码hover状态的文字颜色（可选） */
  ::v-deep .el-pager li:hover:not(.active) {
    color: #f50909 !important; /* hover时文字变色（示例：主题色） */
  }

  ::v-deep .pagination-container {
    background: none;
    margin-top: px2vh(10);
    margin-bottom: px2vh(20);
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 28px;
  }

  //// 隐藏表格滚动条（可选，优化视觉）
  //::v-deep .el-table__body-wrapper {
  //  &::-webkit-scrollbar {
  //    width: 0; // 隐藏纵向滚动条
  //    height: 0; // 隐藏横向滚动条
  //  }
  //}
  //
  //// 确保表格单元格内容不换行（避免行高不一致）
  //::v-deep .el-table__cell {
  //  white-space: nowrap;
  //  overflow: hidden;
  //  text-overflow: ellipsis;
  //}
}
</style>
